<template>
  <div id="my-view">
    <div class="citySelect">
      <city-select v-model="cityInfo" />
      <i class="cityHidden">{{ cityName }}</i>
    </div>
    <div class="my-content">
      <div class="my-left fl">
        <bzzyGdldzs :dep_code="dep_code" />
        <!-- <leftChart1 :dep_code="dep_code" />
        <leftChart2 :dep_code="dep_code" /> -->
      </div>
      <div class="my-center fl">
        <bzzyGdbzqk :dep_code="dep_code" />
        <bzzy5nltxyc :dep_code="dep_code" />
        <bzzyBzlxBzjfxs :dep_code="dep_code" />
        <!-- <centerChart1 :dep_code="dep_code" />
        <centerChart2 :dep_code="dep_code" />
        <centerChart3 :dep_code="dep_code" /> -->
      </div>
      <div class="my-right fr">
        <bzzySyHylb :dep_code="dep_code" />
        <bzzy3nwsykb :dep_code="dep_code" />
        <!-- <rightChart1 :dep_code="dep_code" />
        <rightChart2 :dep_code="dep_code" />
        <rightChart3 /> -->
      </div>
    </div>
  </div>
</template>
<script>
import citySelect from './citySelect'
import bzzyGdldzs from './bzzyGdldzs'
import bzzyGdbzqk from './bzzyGdbzqk'
import bzzy5nltxyc from './bzzy5nltxyc'
import bzzyBzlxBzjfxs from './bzzyBzlxBzjfxs'
import bzzySyHylb from './bzzySyHylb'
import bzzy3nwsykb from './bzzy3nwsykb'
export default {
  name: 'DataView',
  components: {
    citySelect,
    bzzyGdldzs,
    bzzyGdbzqk,
    bzzy5nltxyc,
    bzzyBzlxBzjfxs,
    bzzySyHylb,
    bzzy3nwsykb
  },
  data() {
    return {
      cityInfo: '',
      dep_code: ''
    }
  },
  computed: {
    cityName() {
      const names = []
      this.dep_code =
        this.cityInfo.province +
        '-' +
        this.cityInfo.city +
        '-' +
        this.cityInfo.block
      return (
        this.cityInfo.province +
        '-' +
        this.cityInfo.city +
        '-' +
        this.cityInfo.block
      )
    }
  },
  methods: {}
}
</script>

<style lang="scss">
#my-view {
  width: 100%;
  height: calc(100% - 80px);
  background-size: 100% 100%;
  color: #fff;

  .citySelect {
    width: 100%;
    height: 50px;
    text-align: right;
    padding-right: 20px;

    .cityHidden {
      display: none;
    }
  }

  .my-content {
    width: 100%;
    height: calc(100% - 50px);
    margin: 0, auto;
    box-sizing: border-box;

    .my-left {
      width: 25%;
      height: 100%;
    }

    .my-center {
      width: 50%;
      height: 100%;
      padding: 0 20px 0 20px;
      box-sizing: border-box;
      position: relative;
    }

    .my-right {
      width: 25%;
      height: 100%;
    }
  }
}
</style>
